<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
This file requires a JSONMessage service running under Java on the web host.

TODO: document how to do that (at least with Glassfish)
-->
 <head>
  <title>JSONMessage Demo</title>
<!--
Prototype's JSON support is apparently hosed: as soon as i include Prototype, JSON-able objects
containing empty arrays or empty objects get mis-quoted, causing conversion errors downstream.
e.g. [] gets JSON'd as "[]"! This happens even though i'm not using Prototype for anything other
than the actual AJAX transmission.

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js' type='text/javascript'></script>

Same thing with mootools!!!

<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools.js' type='text/javascript'></script>

Bug reporg:
https://prototype.lighthouseapp.com/projects/8886/tickets/1039-jsonstringify-incorrectly-jsonizes-empty-arrays-when-prototype-is-imported

status: fixed in prototype 1.7. As of this writing (20100421), 1.7 isn't yet released via googleapis.

Dojo appears to work fine for this purpose, however:

<script src='http://ajax.googleapis.com/ajax/libs/dojo/1.4.1/dojo/dojo.xd.js' type='text/javascript'></script>

As does jQuery (of course). Tested with 1.2.6+. Might work with older versions.
-->
<style type='text/css'>
.message-timestamp {
    background-color:lightgray;
    color:darkslateblue;
    font-size:80%;
/*    font-family: monospace;*/
}
.error-message
{
    color:red;
}

/*ul.bogomenu-menu
{
    background-color: #fafafa;
    border: 1px inset black;
}*/

span.bogomenu-branch
{
    font-size: 1em;
    /*font-style: italic;*/
    font-weight: bold;
    color: darkgreen;
}
hr.bogomenu-separator
{
    border-top: 1px solid black;
    border-bottom: none;
}
span.bogomenu-branch:hover
{
    color: white;
    background-color: darkblue;
    /*border: 2px outset black;*/
}
span.bogomenu-leaf
{
    font-size: 0.8em;
    font-style: italic;
    /*font-family: monospace;*/
}
span.bogomenu-leaf:hover
{
    color: white;
    background-color: darkgreen;
    /*border: 2px outset black;*/
}
#ajaxNotification {
/* to place it at the top/left of the browser window,
move the element into the BODY somewhere and then add
something like:

  position:absolute;
  top:0;
  left:0;
  width:300px;
  border: 1px inset darkblue;
*/
  background-color:#0099ff;
  color:white;
  opacity:0.75;

}
</style>
<!-- note that the css/js are ordered as they are because Chrome told me to do it this way. -->
<link rel="stylesheet" href='demo.css' type="text/css"/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='jquery.html.js' type='text/javascript'>/*needed by jquery.bogomenu.js*/</script>
<script src='jquery.bogomenu.js' type='text/javascript'>/*needed by this demo, but not by JSONMessage*/</script>
<script src='/JSONMessage/js' type='text/javascript'>/* JSONMessage framework */</script>
<script src='demo.js' type='text/javascript'>/*demo code*/</script>
</head>
 <body>
<h1>JSONMessage Demo</h1>

<div id='headerArea'>
(See also: <a href='http://code.google.com/p/jsonmessage/'>JSONMessage home page</a>)<br/>
(Click the header to hide this info text. (Assuming JavaScript is working for you.))
<br/><br/>


<div id='aboutJSONMessage'>
JSONMessage is client-server framework implementing a JSON-based messaging system.
Clients (web browsers) create messages via a high-level messaging API and send them off
to the server. The server dispatches the message to an appropriate server-side handler and responds
in a uniform JSON grammar, regardless of the request type. JSONMessage is mostly about
defining the messaging conventions, and the back-end can be implemented in arbitrary
languages/environments (e.g. PHP, Java, or Ruby).
</div><!-- #aboutJSONMessage -->

<br/>
<div>Below is a demonstration. Use the menu on the right to select message types and click the Send
button to send them. If you see no menu on the right, your browser is not capable of handling the JavaScript
used to generate the menu. Clicking on the various menu options will send JSONMessage-formatted message
to the web server, which will (we hope) respond with a JSONMessage-formatted response.
</div>

</div><!-- #headerArea -->
<hr/>

 <h2>Client Request:</h2>

<table border='1'><tr>
<td valign='top'>
<div  style='position:relative;padding:0.5em'>
    <input id='buttonRequest' type='button' value='Send Request' onclick='sendJSONMessage();return false;' style='position:absolute;top:0px;right:0px;'/>
<br/>
<textarea id='textRequest' rows='10' cols='50'>
/* Use the menu on the right to generate request events. */
</textarea>
</div>
</td>

<td width='25%' valign='top' align='left'>
<b>Event selection menu:</b><br/>
<span style='font-size:small' title='If checked, messages are sent as they are clicked. Otherwise the Send button must be used to send them.'>
<input type='checkbox' id='checkSendImmediately' checked='checked'/>Send immediately?
</span>
<br/>
<div id='requestMenu'  style='border:1px dashed black;background-color: #fafafa;height:15em;overflow:auto;padding:0px;'>
If you do not see a menu here then your browser cannot handle the truth.
</div>
</td>

</tr>
<tr>
<td valign='top' align='left'>
    <h2>Server response:</h2><span id='ajaxNotification'></span><br/>
    <textarea id='textResponse' rows='10' cols='50'></textarea>
    <br/><div id='inspectorTest'></div> 
</td><td valign='top' align='left'>
More stuff:
    <ul>
        <li><a href='#' onclick='chuckNorris();return false;'>What Would Chuck Do?</a></li>
        <li><a href='#' onclick='sendBrokenMessage();return false;'>Test onError() handling</a></li>
    </ul>


    Select <tt>JSONMessage.Request.prototype.postBackend()</tt> implementation:<br/>
    <ul>
    <li><a href='#' onclick='return changePostImpl("XMLHttpRequest");'>XMLHttpRequest</a></li>
    <li><a href='#' onclick='return changePostImpl("jQuery");'>jQuery</a></li>
    <li><a href='#' onclick='return changePostImpl("dojo");'>dojo</a></li>
    <li><a href='#' onclick='return changePostImpl("Prototype");'>Prototype</a></li>
    </ul>

    <div style='font-size:80%'>
    Only the XMLHttpRequest and jQuery implementations will work in this demonstration.
    The others will produce error messages because this page does not import those
    libraries. "Prototype" versions 1.6.x (and older) have buggy JSON handling and
    will not work reliably with JSONMessage. (This is
    <a href='https://prototype.lighthouseapp.com/projects/8886/tickets/1039-jsonstringify-incorrectly-jsonizes-empty-arrays-when-prototype-is-imported#ticket-1039-2'>supposedly fixed in Prototype 1.7</a>.)
    i have had similar problems with the Mojo toolkit, which is why no implementation
    exists for that library.
    </div>

</td>
</tr></table>

 <h2>Message log (newest items first):</h2>
 <button onclick='jQuery("#logArea").empty()'>Clear Log</button><br/>
<div id='logArea'></div>

 </body>
</html>

